<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/links/crypto/crypto-js.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>
    
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box " >
<div class="flex ac-table-head">
    <div class="ac-table-oper"><el-button size="medium"  v-if="auditType.operVisible.add" @click="auditType_openAuditTypeAdd()" :disabled="auditType.operDisabled.add"  type="text"     native-type="button">添加(A)</el-button>
<el-button size="medium"  v-if="auditType.operVisible.edit" @click="auditType_editAuditTypeAdd()" :disabled="auditType.operDisabled.edit"  type="text"     native-type="button">编辑(E)</el-button>
<el-button size="medium"  v-if="auditType.operVisible.query" @click="auditType_load()" :disabled="auditType.operDisabled.query"  type="text"     native-type="button">刷新(Q)</el-button>
</div>
    <div></div>
</div>
<div class="ac-table-content">
    <el-table row-key="id" highlight-current-row stripe show-header    border  
    :data="auditType.data" size="mini" ref="auditType"
       
    height="100%"
    @current-change="auditType_currentChange">
    <el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="code" label="审批标识"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.code}}
   </template>
</el-table-column>
<el-table-column prop="label" label="审批名称"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.label}}
   </template>
</el-table-column>
<el-table-column prop="remark" label="审批说明"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        <pre style="white-space: pre-wrap;">{{scope.row.remark}}</pre>
   </template>
</el-table-column>
<el-table-column prop="active" label="启用"    align="center"   class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.active"  size="small"  true-label="Y"  false-label="N"  @change="auditType_change('active',scope.row)"></el-checkbox>

   </template>
</el-table-column>
<el-table-column prop="sortNo" label="序号"    align="left"   class-name="editorCell">
   <template slot-scope="scope">
        <el-input-number size="small" v-model="scope.row.sortNo"       :controls="false"  @change="auditType_change('sortNo',scope.row)"></el-input-number>

   </template>
</el-table-column>

</el-table>

</div>
          
<el-dialog :visible.sync="auditTypeAdd.visible" :title="auditTypeAdd.title"
            width="50%"
                
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;">
                <el-form class=""  :show-message="false"  label-width="80px" label-position="right"
     size="mini" ref="auditTypeAdd" :model="auditTypeAdd.data" :rules="auditTypeAdd.rules"  
     :disabled="auditTypeAdd.disabled" @submit.native.prevent>
    <el-row><el-col :span=24 v-if="auditTypeAdd.itemVisible.code">
    <el-form-item prop="code" label="审批标识">
        
<el-input type="text" size="mini"  v-model="auditTypeAdd.data.code" placeholder="审批标识" :disabled="auditTypeAdd.itemDisabled.code"  @keyup.enter.native="auditTypeAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="auditTypeAdd.itemVisible.label">
    <el-form-item prop="label" label="审批名称">
        
<el-input type="text" size="mini"  v-model="auditTypeAdd.data.label" placeholder="审批名称" :disabled="auditTypeAdd.itemDisabled.label"  @keyup.enter.native="auditTypeAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="auditTypeAdd.itemVisible.remark">
    <el-form-item prop="remark" label="审批说明">
        <el-input type="textarea" size="mini"  v-model="auditTypeAdd.data.remark" placeholder="审批说明" :rows="2" :autosize="false" :disabled="auditTypeAdd.itemDisabled.remark" ></el-input>

        
    </el-form-item>
</el-col>
</el-row>
 </el-form>

            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="auditTypeAdd_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="auditTypeAdd_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>


</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"auditType":{"title":"审批设置","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{},"operVisible":{"query":true,"add":true,"edit":true},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"page":{},"tabDisabled":{},"tabVisible":{},"customOptions":{},"dictOptions":{},"auditTypeAdd":{"visible":false,"title":"添加审批标识","data":{},"operData":{},"operVisible":{},"operDisabled":{},"disabled":false,"editorForm":true,"itemVisible":{"remark":true,"code":true,"label":true},"itemDisabled":{},"transfer":{},"rules":{"code":[{"required":true,"message":"请输入审批标识","trigger":"blur"}],"label":[{"required":true,"message":"请输入审批名称","trigger":"blur"}]}}}
            },
            watch: {
},
            methods: {
auditType_change:function(fieldName,row){
    HttpApi.updateProvider("autocodeWfAuditType",fieldName,row,function(){
                        
    });
},
auditType_currentChange:function(currentRow){
    if(currentRow){
        this.auditType.currentNodeKey=currentRow.id;
        this.auditType.currentRow = currentRow;
    }else{
        this.$data.auditType.currentNodeKey=this.$options.data().auditType.currentNodeKey;
        this.$data.auditType.currentRow = this.$options.data().auditType.currentRow;
    }
    this.auditType_operCtrl(currentRow);
},
auditType_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.auditType.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.auditType.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
auditType_load:function(){
    let that = this;
    HttpApi.queryArray("autocodeWfAuditType",this.auditType.operData,function(res){
        that.auditType.data  = res;
        if(that.auditType.data.length>0){
            that.$refs.auditType.setCurrentRow(that.auditType.data[0]);
            that.auditType_operCtrl(that.auditType.data[0]);
        }else{
             that.$refs.auditType.setCurrentRow();
             that.auditType_operCtrl();
        }
    });
},
auditTypeAdd_change:function(fieldName){
    HttpApi.updateProvider("autocodeWfAuditType",fieldName,this.auditTypeAdd.data,function(){

    });
},
auditTypeAdd_dialogCancel:function(){
     this.auditTypeAdd.visible = false;
},
auditType_editAuditTypeAdd:function(){
    let that = this;
    this.auditTypeAdd.editorForm = true;
    if(!this.auditType.currentRow.id){
        this.$alert("请先选中一条审批人信息");
        return;
    }else{
        this.auditTypeAdd_dialogOpen(this.auditType.currentRow,function(dialogData){
            HttpApi.saveProvider("autocodeWfAuditType",dialogData,function(res){
                let index = that.auditType.data.findIndex(function(item){
                    return item.id==res.id;
                });
                that.$set(that.auditType.data, index, res);
                that.$refs.auditType.setCurrentRow(res);
                that.$message.success("操作成功！");
                that.auditTypeAdd.visible = false;
            });
        })
    }
},
auditTypeAdd_load:function(){
    let that = this;
    HttpApi.queryObject("autocodeWfAuditType",this.auditTypeAdd.operData,function(res){
        that.auditTypeAdd.data = res;
    });
},
auditTypeAdd_dialogOpen:function(param,callback){
    this.$data.auditTypeAdd.data = this.$options.data().auditTypeAdd.data;
    this.$data.auditTypeAdd.operData = this.$options.data().auditTypeAdd.operData;
    for(let val in param) {
        this.$set(this.auditTypeAdd.data, val, param[val])
    }
    this.auditTypeAdd.callback=callback;
    this.auditTypeAdd.visible = true;
}
,
auditType_openAuditTypeAdd:function(){
    let that = this;
    this.auditTypeAdd.editorForm = false;
    let param = {};
    this.auditTypeAdd_dialogOpen(param,function(dialogData){
       
        HttpApi.saveProvider("autocodeWfAuditType",dialogData,function(res){
            that.$message.success("操作成功！");
            that.auditType.data.push(res);
            that.$refs.auditType.setCurrentRow(res);
            that.auditTypeAdd.visible = false;
        });
    })
},
auditTypeAdd_dialogOk:function(){
    let that = this;
    this.$refs.auditTypeAdd.validate(function(valid){
        if(valid){
            that.auditTypeAdd.callback(that.auditTypeAdd.data);
        }else{
            return false;
        }
    });
}
},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function(){
    let that=this;
    //获取字典信息
    HttpApi.dictOptions([],function(res){
        that.dictOptions=res;
    });

    //加载自定义数据字典
    

    //加载初始化load
    this.auditType_load();


    //加载初始化方法
    
}
    });
    

    
</script>
</html>
